import React, { useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import axios from 'axios'
import Home from '../../views/sandbox/home/Home'
import UserList from '../../views/sandbox/user-manage/UserList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import RightList from '../../views/sandbox/right-manage/RightList'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import NewsPreview from '../../views/sandbox/news-manage/Newspreview'
import NewsUpdate from '../../views/sandbox/news-manage/NewsUpdate'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import Item from 'antd/lib/list/Item'
import { rightSquareBracket } from 'charcodes'
import { Spin } from 'antd'

const LocalRouterMap = {
    "/home": Home,
    "/user-manage/list": UserList,
    "/right-manage/role/list": RoleList,
    "/right-manage/right/list": RightList,
    "/news-manage/add": NewsAdd,
    "/news-manage/draft": NewsDraft,
    "/news-manage/category": NewsCategory,
    "/news-manage/preview/:id": NewsPreview,
    "/news-manage/update/:id": NewsUpdate,
    "/audit-manage/audit": Audit,
    "/audit-manage/list": AuditList,
    "/publish-manage/unpublished": Unpublished,
    "/publish-manage/published": Published,
    "/publish-manage/sunset": Sunset,
}

export default function NewsRouter() {
    const [backRouteList, setBackRouteList] = useState([])
    useEffect(() => {
        Promise.all([
            axios.get("/rights"),
            axios.get("/children"),
        ]).then(res => {
            setBackRouteList([...res[0].data, ...res[1].data])
            console.log([...res[0].data, ...res[1].data])
        })
    }, [])

    const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
    const checkRoute = (Item) => {
        return LocalRouterMap[Item.key] && (Item.pagepermisson || Item.routepermisson)
    }

    const checkUsernamePermission = (Item) => {
        return rights.includes(Item.key)
    }

    return (
        <Spin size="large" spinning={false}>
            <Switch>
                {
                    backRouteList.map(Item =>
                    //react在路由选择上是模糊匹配，会先匹配第一级路径，所以要用严格匹配exact
                    {
                        if (checkRoute(Item) && checkUsernamePermission(Item)) {
                            return <Route path={Item.key} key={Item.key} component={LocalRouterMap[Item.key]} exact />
                        }
                        return null
                    }
                    )
                }
                {/* 模糊匹配带 / 的都能匹配到  后面两要搭配使用*/}
                <Redirect from="/" to="home" exact />
                {/* 刷新的时候会出现404的画面，因为一开始是一个空数组，要判断一下将数组长度 */}
                {
                    backRouteList.length > 0 && <Route path="*" component={Nopermission} />
                }
            </Switch>
        </Spin>
    )
}
